<template>
  <!-- 品牌详情-关联商品88/91 -->
  <div id="associatedGoods">
    <div class="vip_pay_box" v-if="!vipRootObj[88][91].owner">
      <div class="vip_bg_box">
        <div class="vip_bg_mask"></div>
      </div>
      <div class="vip_box_wrap">
        <payVip
          routerName="FansPortrait"
          :lowestVipNum="vipRootObj[88][91].ownerMinLevel"
        />
      </div>
    </div>
    <template v-else>
      <div class="top">
        <radio_group01
          :radio_values="['近7天', '30天', '90天']"
          v-model="KindName"
          class="tab01"
        />
        <div class="optionsBox">
          <el-date-picker
            class="long_time"
            v-model="liveTime"
            type="daterange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            prefix-icon="el-icon-arrow-down"
            unlink-panels
            :clearable="false"
            :picker-options="pickeroptions"
            value-format="yyyy-MM-dd"
            @change="onPick1"
          ></el-date-picker>
        </div>
      </div>
      <div class="pie">
        <div class="left">
          <div class="header">
            <div class="line"></div>
            <span>商品来源分析</span>
          </div>
          <div class="pie-01">
            <Bigpie
              :valueData="sourceData"
              v-if="sourceData.length != 0 && !loading01"
            />
            <div
              v-loading="loading01"
              v-if="loading01"
              class="loading"
              element-loading-text="拼命加载中..."
              element-loading-spinner="el-icon-loading"
              style="margin-top: 120px"
            ></div>

            <div
              class="empty addTop"
              v-if="sourceData.length == 0 && !loading01"
            >
              <img src="@/assets/liu/zw.png" />
              <p>暂无数据</p>
            </div>
          </div>
        </div>
        <div class="right">
          <div class="header">
            <div class="line"></div>
            <span>商品价格分布</span>
          </div>
          <div class="pie-01">
            <Bigpie
              :valueData="priceData"
              v-if="priceData.length != 0 && !loading02"
            />
            <div
              v-loading="loading02"
              v-if="loading02"
              class="loading"
              element-loading-text="拼命加载中..."
              element-loading-spinner="el-icon-loading"
              style="margin-top: 120px"
            ></div>
            <div
              class="empty addTop"
              v-if="priceData.length == 0 && !loading02"
            >
              <img src="@/assets/liu/zw.png" />
              <p>暂无数据</p>
            </div>
          </div>
        </div>
      </div>
      <radioGroupWithNum
        :radio_values="sourceList"
        v-model="source"
        title="商品来源"
        class
      />
      <radioGroupWithNum
        :radio_values="proKindList"
        v-model="proKind"
        title="商品类目"
        class
      />
      <radioGroupWithNum
        :radio_values="priceList"
        v-model="price"
        title="价格区间"
        class
      />

      <div class="searchBox">
        <el-input
          v-model="keyWords"
          placeholder="请输入商品关键词搜索"
          @keyup.enter.native="toSearch"
        ></el-input>
        <div class="imgBox" @click="toSearch"></div>
      </div>

      <table class="table">
        <thead>
          <tr>
            <th>商品</th>
            <th>券后价</th>
            <th
              @click="sort_fun(true, 2)"
              v-if="orderType == 'desc' && sort == 2"
            >
              关联直播数
              <img src="@/assets/meng/down_up.png" />
            </th>
            <th v-else @click="sort_fun(false, 2)">
              关联直播数
              <img
                src="@/assets/meng/up_down.png"
                v-if="orderType == 'asc' && sort == 2"
              />
              <img src="@/assets/meng/no_down_up.png" v-else />
            </th>

            <th
              @click="sort_fun(true, 3)"
              v-if="orderType == 'desc' && sort == 3"
            >
              关联视频数
              <img src="@/assets/meng/down_up.png" />
            </th>
            <th v-else @click="sort_fun(false, 3)">
              关联视频数
              <img
                src="@/assets/meng/up_down.png"
                v-if="orderType == 'asc' && sort == 3"
              />
              <img src="@/assets/meng/no_down_up.png" v-else />
            </th>

            <th
              @click="sort_fun(true, 4)"
              v-if="orderType == 'desc' && sort == 4"
            >
              销量
              <img src="@/assets/meng/down_up.png" />
            </th>
            <th v-else @click="sort_fun(false, 4)">
              销量
              <img
                src="@/assets/meng/up_down.png"
                v-if="orderType == 'asc' && sort == 4"
              />
              <img src="@/assets/meng/no_down_up.png" v-else />
            </th>

            <th>预估销售额</th>
          </tr>
        </thead>
        <tbody v-if="goods.length != 0 && !loading">
          <tr v-for="(item, index) in goods" :key="index">
            <td>
              <div class="goodsBox" @click="goodsDetails(item.proId, '0')">
                <img :src="item.proLogo" class="leftImg" v-errorImg:shop />
                <div class="rightBox">
                  <div class="goods_iden" v-if="item.proSign != 0">
                    {{
                      item.proSign == 1
                        ? "自有"
                        : item.proSign == 2
                        ? "广场"
                        : item.proSign == 3
                        ? "自有&广场"
                        : ""
                    }}
                  </div>
                  <p>{{ item.proTitle }}</p>
                </div>
              </div>
            </td>
            <td>￥{{ item.proPrice }}</td>
            <td>{{ format_num(item.associatedliveIncr) }}</td>
            <td>{{ format_num(item.associatedVideoIncr) }}</td>
            <td>{{ format_num(item.volumeIncr) }}</td>
            <td>{{ format_num(item.amount) }}</td>
          </tr>
        </tbody>
      </table>
      <div
        v-loading="loading"
        v-if="loading"
        class="loading"
        element-loading-text="拼命加载中..."
        element-loading-spinner="el-icon-loading"
        style="margin: auto"
      ></div>
      <div class="pageBox" v-if="goods.length != 0 && !loading">
        <el-pagination
          background
          layout="prev, pager, next, jumper"
          :total="count"
          :page-size="30"
          :current-page="page"
          @current-change="getDate"
          :hide-on-single-page="true"
        ></el-pagination>
      </div>
      <div class="empty addTop" v-if="goods.length == 0 && !loading">
        <img src="@/assets/liu/zw.png" />
        <p>暂无数据</p>
      </div>
    </template>
  </div>
</template>

<script>
import Bigpie from "@/pages/wang/talent/tdetails/component/BigPie";
import radioGroupWithNum from "@/component/radioGroupWithNum.vue";
import SourceIcon from "@/component/SourceIcon.vue";
export default {
  data() {
    return {
      KindName: "30天",
      liveTime: [],
      keyWords: "",
      sourceData: [],
      priceData: [],
      loading02: false,
      source: "全部",
      proKind: "全部",
      price: "全部",
      sourceList: [],
      proKindList: [],
      priceList: [],
      sort: 4,
      orderType: "desc", //desc降序 asc升序
      page: 1,
      goods: [],
      count: 0,
      startDate: "",
      endDate: "",
      loading: false,
      loading01: false,
      nothing: true,
      // 选择时间 不可选的日期
      pickeroptions: {
        disabledDate: (time) => {
          return (
            time.getTime() < Date.now() - 90 * 24 * 60 * 60 * 1000 ||
            time.getTime() > Date.now()
          ); // 返回 所有时间 大于 当前时间
        },
      },
      vipRootObj: this.$store.state.userRoot, //会员权限对象
    };
  },
  computed: {
    changeData() {
      const { source, proKind, price } = this;
      return {
        proKind,
        source,
        price,
      };
    },
  },
  components: { Bigpie, radioGroupWithNum, SourceIcon },

  watch: {
    changeData() {
      this.page = 1;
      this.goods = [];
      this.getTime();
      this.getDate();
    },
    KindName: function (newVal, oldVal) {
      this.KindName = newVal;
      this.page = 1;
      this.goods = [];
      this.priceData = [];
      this.sourceData = [];
      this.getTime();
      this.getSource();
      this.getSection();
      this.getDate();
      this.getKing();
    },
    keyWords: function (newVal, oldVal) {
      if (newVal == "") {
        this.page = 1;
        this.goods = [];
        this.getDate();
      }
    },
  },
  created() {
    if (this.vipRootObj[88][91].owner) {
      this.getTime();
      this.getSource();
      this.getSection();
      this.getDate();
      this.getKing();
    }
  },

  methods: {
    //搜索
    toSearch() {
      this.goods = [];
      this.page = 1;
      this.getTime();
      this.getDate();
    },
    //跳转商品详情

    goodsDetails(id, tabNo) {
      let routeUrl = this.$router.resolve({
        path: `/talent_main/shop_main/${id}/${tabNo}`,
      });
      window.open(routeUrl.href, "_blank");
    },
    // 排序
    sort_fun(parm01, parm02) {
      console.log(parm01, parm02);
      if (parm01) {
        this.orderType = "asc";
      } else {
        this.orderType = "desc";
      }
      this.sort = parm02;
      this.page = 1;
      this.goods = [];
      this.getDate();
    },
    onPick1() {
      this.KindName = "";
      this.goods = [];
      this.page = 1;
      this.getTime();
      this.getSource();
      this.getSection();
      this.getDate();
      this.getKing();
    },
    getTime() {
      switch (this.KindName) {
        case "近7天":
          this.endDate = this.timestamp(Date.now() / 1000 - 1 * 86400, "Y-M-D");
          this.startDate = this.timestamp(
            Date.now() / 1000 - 86400 * 7,
            "Y-M-D"
          );
          break;
        case "30天":
          this.endDate = this.timestamp(Date.now() / 1000 - 1 * 86400, "Y-M-D");
          this.startDate = this.timestamp(
            Date.now() / 1000 - 86400 * 30,
            "Y-M-D"
          );
          break;
        case "90天":
          this.endDate = this.timestamp(Date.now() / 1000 - 1 * 86400, "Y-M-D");
          this.startDate = this.timestamp(
            Date.now() / 1000 - 86400 * 90,
            "Y-M-D"
          );
          break;
        default:
          this.startDate = this.liveTime[0];
          this.endDate = this.liveTime[1];
          break;
      }
      this.liveTime = [this.startDate, this.endDate];
    },
    // 商品来源/类目/价格
    getKing() {
      this.$axios
        .get("/api/brand/ShopCate", {
          params: {
            brandId: this.$route.query.id,
            startDate: this.startDate,
            endDate: this.endDate,
          },
        })
        .then((res) => {
          if (res.data.code == 0) {
            this.sourceList = res.data.data.shopList;
            this.proKindList = res.data.data.cateList;
            this.priceList = res.data.data.priceList;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //商品来源分析
    getSource() {
      this.loading01 = true;
      this.$axios
        .get("/api/brand/Source", {
          params: {
            startDate: this.startDate,
            endDate: this.endDate,
            brandId: this.$route.query.id,
          },
        })
        .then((res) => {
          if (res.data.code == 0) {
            this.loading01 = false;
            if (res.data.data != null) {
              this.sourceData = res.data.data;
            }
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //商品价格分布
    getSection() {
      this.loading02 = true;
      this.$axios
        .get("api/brand/Section", {
          params: {
            startDate: this.startDate,
            endDate: this.endDate,
            brandId: this.$route.query.id,
          },
        })
        .then((res) => {
          this.loading02 = false;
          if (res.data.code == 0) {
            this.priceData = res.data.data;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 表格
    getDate(cpage) {
      this.loading = true;

      if (cpage) {
        this.page = cpage;
        this.backTop();
      }
      //小店id
      let procategoryId = 0;
      let shops;
      if (this.sourceList != "") {
        this.sourceList.map((item, index) => {
          if (item.name == this.source) {
            procategoryId = item.value;
            shops = item.shopIds;
          }
        });
      }

      //品类id
      let goodsKindId;
      if (this.proKindList != "") {
        this.proKindList.map((item, index) => {
          if (item.name == this.proKind) {
            goodsKindId = item.value;
          }
        });
      }

      //价格区间
      let priceId;
      if (this.priceList != "") {
        this.priceList.map((item, index) => {
          if (item.name == this.price) {
            priceId = item.value;
          }
        });
      }

      this.$axios
        .post("/api/brand/Pro", {
          startDate: this.startDate,
          endDate: this.endDate,
          brandId: this.$route.query.id,
          sort: this.sort,
          proCateId: goodsKindId,
          shopId: procategoryId,
          shopIds: shops,
          price: priceId,
          page: this.page,
          size: 30,
          order_by: this.orderType,
          key: this.keyWords,
        })
        .then((res) => {
          this.loading = false;
          if (res.data.code == 0) {
            if (res.data.data.length != 0) {
              this.goods = res.data.data;
              this.count = res.data.count;
            }
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    backTop() {
      document.body.scrollTop = document.documentElement.scrollTop = 0;
    },
  },
};
</script>
<style lang="less" scoped>
#associatedGoods {
  height: 83vh;
  overflow: auto;
  padding-top: 20px;
  padding-left: 20px;
  padding-right: 20px;
  .top {
    margin-bottom: 20px;
    display: flex;
    justify-content: flex-end;
    .tab01 {
    }
  }
  .optionsBox {
    margin-left: 10px;
  }
  // 搜索框
  .imgBox {
    background: url("../../../assets/wang/talentCompare/search-nohover.png")
        no-repeat 10px 7px,
      #fff !important;
    background-size: 15px 15px !important;
    border: 1px solid #e5e5e5;
    border-left: 0;
  }

  .pie {
    display: flex;
    > div:nth-child(1) {
      width: 50%;
      .pie-01 {
        height: 290px;
      }
    }
    > div:nth-child(2) {
      width: 50%;
      .pie-01 {
        height: 290px;
      }
    }
  }
  .header {
    display: flex;
    align-items: center;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0px;
    color: #222222;
    .line {
      width: 4px;
      height: 16px;
      border-radius: 100px;
      margin-right: 6px;
      background-color: #fd7f2c;
    }
  }
  .table {
    text-align: center;
    box-sizing: border-box;
    thead {
      th {
        padding: 0 5px;
      }
      th:nth-child(1) {
        text-align: left;
        padding-left: 56px;
      }

      th:nth-child(2),
      th:nth-child(3),
      th:nth-child(4),
      th:nth-child(6),
      th:nth-child(7),
      th:nth-child(5) {
        width: 15%;
      }
      th:nth-child(3),
      th:nth-child(4),
      th:nth-child(5) {
        cursor: pointer;
      }
      img {
        width: 5px;
        height: 10px;
        vertical-align: 0;
      }
    }
  }
  tbody {
    tr {
      height: 78px;
      td:nth-child(1) {
        // 商品
        .goodsBox {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          cursor: pointer;
          padding-left: 24px;
          .leftImg {
            width: 50px;
            height: 50px;
            border-radius: 6px;
            border: 1px solid #e5e5e5;
          }
          .rightBox {
            flex: 0 0 calc(100% - 70px);
            // width: calc(100% - 50px);
            font-size: 14px;
            font-weight: 600;
            color: #222222;
            position: relative;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            margin-left: 10px;
            text-align: left;
            p {
              cursor: pointer;
              display: inline;
              &:hover {
                color: #ff924b;
              }
            }
            .goods_iden {
              text-align: center;
              display: inline-block;
              width: 32px;
              height: 16px;
              background-color: #fff7ee;
              border-radius: 4px;
              border: solid 1px #fd7f2c;
              font-size: 12px;
              font-weight: normal;
              line-height: 16ppx;
              color: #fd7f2c;
            }
          }
        }
      }

      td:nth-child(2),
      td:nth-child(3),
      td:nth-child(4),
      td:nth-child(6),
      td:nth-child(5) {
        font-family: DINAlternate-Bold;
        font-size: 15px;
        color: #222;
      }
      td:nth-child(2) {
        color: #ea1b0b;
      }
    }
  }

  .addTop {
    padding: 40px;
  }
}
</style>
